<style scope>
.v-note-wrapper{
    z-index:901 !important;
}
#about > div{
    margin-bottom:100px;
}
#about > div > h1{
    border-left:2px solid #58b957;
    padding-left:10px;
    padding-top:5px;
    padding-bottom:5px;
}
#about > div > div{
    padding-left:20px;
    margin-top:50px;
}
</style>

<template>
    <div id='about'>
        <div class='personal-info'>
            <h1>个人信息</h1>
            <div>
                <mavon-editor ref=md :value='aboutme.markdown'  @change="$change" @save="submitAboutme" @imgAdd="$imgAdd"  placeholder='内容' code_style="agate"/>
            </div>
        </div>
        <div class='change-avatar'>
            <h1>更换头像</h1>
            <div>
                <avatar></avatar>
            </div>
        </div>
        <div class='change-user-password'>
            <h1>更改用户名、密码</h1>
            <div>
                <Form :model="login" label-position="left" :label-width="100">
                    <FormItem label="用户名">
                        <Input v-model="login.username" style="width: 300px"></Input>
                    </FormItem>
                    <FormItem label="密码">
                        <Input v-model="login.password" style="width: 300px" type='password'></Input>
                    </FormItem>
                    <FormItem label="确认密码">
                        <Input v-model="login.repassword" style="width: 300px" type='password'></Input>
                    </FormItem>
                </Form>
                <Button type="success" @click='changeUP'>确认修改</Button>
            </div>
        </div>
    </div>
    
</template>

<script>
    import Qs from 'qs'
    import avatar from '@/components/Avatar'
    export default{
        name:'About',
        components: {
            'avatar': avatar
        },
        data(){
            return{
                login:{
                    username:'',
                    password:'',
                    repassword:''
                },
                submitModule:false,
                loding:false,
                aboutme:{

                }
            }
        },
        mounted(){
            this.$Loading.start();//加载动画开始
            const that = this;
            this.$http.get(
                that.surl+'aboutme'+'?sessionID='+that.$cookie.get('sessionID')
            )
              .then(function (response) {
                that.$Loading.finish();//加载完毕
                if(response.data!==false){
                  that.aboutme = response.data;
                }else{
                    that.$router.push('/admin/404');
                }
              })
              .catch(function (error) {
                that.$router.push('/admin/404');
              });
        },
        methods:{
            $change(markdown,html){
                this.aboutme.markdown=markdown;
                this.aboutme.html=html;
            },
            submitAboutme(){
                if(!(this.aboutme.markdown===''||this.aboutme.html==='')){
                    this.loding =!this.loding;
                    this.aboutme.sessionID=this.$cookie.get('sessionID');
                    const that = this; 
                    this.$http.post(that.surl+'aboutme',Qs.stringify(that.aboutme),{headers:{'Content-Type':'application/x-www-form-urlencoded'}})
                        .then(function(response){
                            that.loding = !that.loding;
                            if(response.data===true){
                                that.$Message.success('发布成功');
                                that.$router.push('/admin/home');
                            }else{
                                that.$Message.error('发布失败');
                            };
                        })
                        .catch(function(error){
                            that.loding = that.loding;
                            that.$Message.error('发布失败');
                        });
                }else{
                    this.$Message.info({
                        title: '内容不完整',
                        content: '<p>请将内容填写完整</p>'
                    })
                }
            },
            $imgAdd(pos, $file){
                // 第一步.将图片上传到服务器.
                // 第一步.将图片上传到服务器.
               const formdata = new FormData();
               formdata.append('image', $file);
               const that=this;
               this.$http({
                   url: this.surl+'image?sessionID='+that.$cookie.get('sessionID'),
                   method: 'post',
                   data: formdata,
                   headers: { 'Content-Type': 'multipart/form-data' },
               }).then((response) => {
                   this.$refs.md.$img2Url(pos, response.data);
               })
            },
            changeUP(){
                if(this.login.username!==''&&this.login.password!==''){
                    if(!(this.login.password!==this.login.repassword)){
                        const that = this;
                        this.login.sessionID=this.$cookie.get('sessionID');
                        this.$http.post(that.surl+'changeup',Qs.stringify(that.login),{headers:{'Content-Type':'application/x-www-form-urlencoded'}})
                            .then(function(response){
                                that.loding = !that.loding;
                                if(response.data!==false){
                                    that.$cookie.set('sessionID','');
                                    that.$Message.success('修改成功');
                                    that.$router.push('/admin/login');
                                }else{
                                    that.$Message.error('修改失败');
                                };
                            })
                            .catch(function(error){
                                that.loding = that.loding;
                                that.$Message.error('修改失败');
                            });
                    }else{
                        this.$Modal.info({
                            title: '密码不一致',
                            content: '<p>两次密码不一致</p>'
                        })
                    }
                }else{
                    this.$Modal.info({
                        title: '内容不完整',
                        content: '<p>用户名、密码不能为空</p>'
                    })
                }
            },
            showUploadBox(){
                this.uploadBoxShow=!this.uploadBoxShow;
            }
        }
    }
</script>